<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="result">

</div>
<script>
  //1 创建一个XMLHttpRequest对象
  var xmlHttpRequest = new XMLHttpRequest();
  //2 对象的 onreadystatechange 属性来检测请求过程
  xmlHttpRequest.onreadystatechange = ()=>{
      //在这里处理服务器响应。
//       0（未初始化）或（请求还未初始化）
// 1（正在加载）或（已建立服务器链接）
// 2（已加载）或（请求已接收）
// 3（交互）或（正在处理请求）
// 4（完成）或（请求已完成并且响应已准备好）

      // console.log(xmlHttpRequest.readyState)
      // 处理请求1 =》readyState
      if (xmlHttpRequest.readyState === XMLHttpRequest.DONE){
          //着服务器响应收到了并且是没问题
          // 处理请求2 =》status
          if (xmlHttpRequest.status === 200){
              // HTTP 响应码 200 ,其他的状态码大家要去熟悉 (404,500,401,400,403)
              //3 以文本形式响应的结果
              console.log(xmlHttpRequest.responseText)
              //后续再调整这个文字内容在页面上显示
              // JSON.parse() =>字符串 变成javaScript中对象
              let user = JSON.parse(xmlHttpRequest.responseText);
              //
              document.getElementById("result").innerHTML = user.username;
          }
      }else{
          //服务器响应存在问题(未完成)
          console.error("服务器响应未完成")
      }

  }
  //3 发送请求的过程 ( HTTP 请求对象的 open() 和 send() 方法发送一个实际的请求)
  //结合后端接口来编码 http://localhost:9876/swagger-ui.html#/userinfo-controller/queryByIdUsingGET_1
  xmlHttpRequest.open("get","userinfo/14",true);
  xmlHttpRequest.send();
</script>
</body>
</html>